<template>
  <el-dialog
    v-model="show"
    :title="title"
    width="1100px"
    append-to-body
    :close-on-click-modal="false"
    destroy-on-close
  >
    <el-form ref="dialogRef" :model="form" :rules="rules"  inline label-width="100px">
      <el-row>
        <el-col :span="4" class="touxiang">
          <el-form-item prop="picUrl">
            <ImageUpload2
              :cropHeight="280"
              :cropWidth="200"
              v-model="form.picUrl"
              class="threeFour"
              :limit="1"
              :is-show-tip="false"
            />
            <!--            <span class="tip">请上传近期 彩色免冠照片</span>-->
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <h3 class="formTitle">基本信息</h3>
          <el-row>
           
            <div class="formline">
              <el-row>
              <el-col :span="8">
                <el-form-item label="姓名" prop="realName">
                  <el-input v-model="form.realName"  style="width: 100%"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别" prop="sex">
                  <el-radio-group v-model="form.sex"  style="width: 100%">
                    <el-radio label="0">女</el-radio>
                    <el-radio label="1">男</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出生日期" prop="birth">
                  <el-date-picker
                    v-model="form.birth"
                    style="width: 100%"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择出生日期"
                  />
                </el-form-item>
              </el-col>
              </el-row>
              <el-row>
              <el-col :span="8">
                <el-form-item label="国籍" prop="countryId">
                  <el-select
                    v-model="form.countryId"
                    style="width: 100%"
                    @change="changeCountryId"
                  >
                    <el-option
                      v-for="item in countryList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="民族" prop="nation">
                  <el-select v-model="form.nation" style="width: 100%">
                    <el-option
                      v-for="item in nationList"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="showRequire">
                <el-form-item label="联系方式" prop="phone">
                  <el-input type="number" v-model="form.phone"  style="width: 100%"/>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-else>
                <el-form-item label="联系方式">
                  <el-input type="number" v-model="form.phone"  style="width: 100%"/>
                </el-form-item>
              </el-col>
              </el-row>
              <el-row>
              <el-col :span="8">
                <el-form-item label="证件类型" prop="idcType">
                  <el-select v-model="form.idcType" style="width: 100%">
                    <el-option
                      v-for="item in certificates"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证件号码" prop="idcCode">
                  <el-input v-model="form.idcCode" @blur="checkCode"  style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8" />
              </el-row>
              <el-row>
              <el-col :span="22">
                <el-form-item label="实名认证">
                  <el-row class="shenfen">
                    <el-col :span="12">
                      <ImageUpload
                        v-model="form.idcFrontImg"
                        :limit="1"
                        :is-show-tip="false"
                      />
                    </el-col>
                    <el-col :span="12">
                      <ImageUpload
                        v-model="form.idcBackImg"
                        :limit="1"
                        :is-show-tip="false"
                      />
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
              </el-row>
              <el-row>
              <el-col :span="22">
                <el-form-item label="所在地区" prop="regionId">
                  <el-cascader
                    v-model="form.regionId"
                    style="width:100%"
                    :options="regionsList"
                    :props="{ label: 'text' }"
                  />
                </el-form-item>
              </el-col>
           </el-row>
           <el-row>
              <el-col :span="22">
                <el-form-item label="详细地址" prop="address">
                  <el-input v-model="form.address" type="textarea" :rows="2"  style="width: 100%"/>
                </el-form-item>
              </el-col>
           </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="身份标签" prop="labelArr">
                  <el-checkbox-group v-model="form.labelArr" @change="labelvalue">
                    <el-checkbox label="0">运动员</el-checkbox>
                    <el-checkbox label="1">教练</el-checkbox>
                    <el-checkbox label="2">领队</el-checkbox>
                    <el-checkbox label="4">队医</el-checkbox>
                    <el-checkbox label="5">翻译</el-checkbox>
                    <el-checkbox label="6">官员</el-checkbox>
                    <el-checkbox label="3">其他</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              </el-row>
            </div>
            <el-col :span="24">
              <h3 class="formTitle">紧急联系方式</h3>
            </el-col>
            <div class="formline">
              <el-col :span="8">
                <el-form-item label="紧急联系人">
                  <el-input v-model="form.ecName" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="紧急联系电话" label-width="120px">
                  <el-input v-model="form.ecPhone" />
                </el-form-item>
              </el-col>
              <el-col :span="8" />
              <el-col :span="8">
                <el-form-item label="与本人关系">
                  <el-input v-model="form.ecRelationship" />
                </el-form-item>
              </el-col>
            </div>
          </el-row>
        </el-col>
      </el-row>
      <!-- <el-row>
       
      </el-row> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer text-center">
        <el-button type="primary" @click="submitForm" size="large">保 存</el-button>
        <el-button @click="cancel" size="large">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, toRefs, watch } from "vue";
import { getCurrentInstance, nextTick, onMounted } from "@vue/runtime-core";
import * as match from "@/api/match/pc";
import { certificates } from "@/assets/lib/nation";
import { ElMessage } from "element-plus";
import { nationList } from "@/assets/js/data";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["submitForm"]);
const data = reactive({
  form: {
    countryId: 240,
  },
  rules: {
    realName: [{ required: true, message: "必填", trigger: "blur" }],
    nation: [{ required: true, message: "必填", trigger: "blur" }],
    countryId: [{ required: true, message: "必填", trigger: "change" }],
    idcType: [{ required: true, message: "必填", trigger: "change" }],
    idcCode: [{ required: true, message: "必填", trigger: "blur" }],
    phone: [{ required: true, message: "必填", trigger: "blur" }],
    // regionId: [{ required: true, message: '必填', trigger: 'change' }],
    birth: [{ required: true, message: "必填", trigger: "change" }],
    // address: [{ required: true, message: '必填', trigger: 'blur' }],
    picUrl: [{ required: true, message: "必填", trigger: "blur" }],
    sex: [{ required: true, message: "必填", trigger: "change" }],
    labelArr: [{ required: true, message: "必填", trigger: "change" }],
  },
  show: false,
  countryList: [],
  regionsList: [],
  title: "添加人员",
  groupId: "0",
  showRequire: false,
});
const {
  showRequire,
  form,
  rules,
  show,
  countryList,
  regionsList,
  title,
  groupId,
} = toRefs(data);
onMounted(() => {
  getCountryList();
  getRegionsList();
});
let editgay = false;
const open = (params) => {
  console.log(params);
  show.value = true;
  title.value = params.title;
  groupId.value = params.groupId || "0";
  if (params.id != 0) {
    // 编辑
    editgay = true;
    match.getPersonInfoById(params.id).then((res) => {
      form.value = res.data;
      form.value.id = params.id;
      if (form.value.label) {
        // {0:0,1:1,2:3}
        form.value.labelArr = form.value.label.split(",");
        labelvalue(form.value.labelArr);
      }
    });
  }
};
defineExpose({ open });
watch(show, (value) => {
  if (!value) {
    form.value = {};
  }
  nextTick(() => {
    proxy.$refs["dialogRef"].clearValidate();
  });
});

function getCountryList() {
  match.countryList().then((res) => {
    countryList.value = res.data;
  });
}

function changeCountryId() {
  if (form.value.countryId != 240) {
    form.value.nation = "其他";
  }
}

function getRegionsList() {
  match.regionsList().then((res) => {
    regionsList.value = res.data;
  });
}

function checkCode() {
  if (form.value.idcType && form.value.idcCode) {
    giveBirthDay();
    var obj = {
      idcType: form.value.idcType,
      idcCode: form.value.idcCode,
    };
    match.checkPerson(obj).then((res) => {
      if (res.data.idcCode != null) {
        form.value = res.data;
        if (form.value.label != null) {
          form.value.labelArr = form.value.label.split(",");
          labelvalue(form.value.labelArr);
        }
        form.value.groupId = groupId.value;
      }
    });
  }
}

function giveBirthDay() {
  // 判断身份证正确性/赋值生日
  if (form.value.idcType == 0) {
    if (!/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(form.value.idcCode)) {
      ElMessage.error("请输入正确的身份证号码");
    } else {
      let tmpStr = "";
      if (form.value.idcCode.length == 15) {
        tmpStr = form.value.idcCode.substring(6, 12);
        tmpStr = "19" + tmpStr;
        tmpStr =
          tmpStr.substring(0, 4) +
          "-" +
          tmpStr.substring(4, 6) +
          "-" +
          tmpStr.substring(6);
      } else {
        tmpStr = form.value.idcCode.substring(6, 14);
        tmpStr =
          tmpStr.substring(0, 4) +
          "-" +
          tmpStr.substring(4, 6) +
          "-" +
          tmpStr.substring(6);
      }
      form.value.birth = tmpStr;

      const res = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
      if (form.value.idcCode && res.test(form.value.idcCode)) {
        const genderCode = form.value.idcCode.charAt(16);
        if (parseInt(genderCode) % 2 == 0) {
          form.value.sex = "0";
        } else {
          form.value.sex = "1";
        }
      }
    }
  }
}

function labelvalue(e) {
  if (e.indexOf("1") > -1 || e.indexOf("2") > -1) {
    // 联系方式必填
    showRequire.value = true;
  } else {
    showRequire.value = false;
  }
  console.log(showRequire.value);
}

function submitForm() {
  proxy.$refs["dialogRef"].validate((valid) => {
    if (valid) {
      // 验证身份证号
      if (
        form.value.idcType == 0 &&
        !/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(form.value.idcCode)
      ) {
        ElMessage.error("请输入正确的身份证号码");
        return;
      }
      // 验证手机号
      if (showRequire.value) {
        var pattern = /^1[3456789]\d{9}$/;
        if (!pattern.test(form.value.phone)) {
          ElMessage.error("请输入正确的手机号");
          return;
        }
      }

      if (typeof form.value.regionId === "object") {
        form.value.regionId = _.last(form.value.regionId);
      }
      form.value.label = form.value.labelArr.toString();

      if (groupId.value != 0) {
        // 团队
        form.value.groupId = groupId.value;
        match.savePersonForMyGroup(form.value).then((res) => {
          ElMessage.success("保存成功");
          show.value = false;
          emit("submitForm");
        });
      } else {
        if (editgay) {
          match.editPersonInfo(form.value).then((res) => {
            ElMessage.success("保存成功");
            show.value = false;
            emit("submitForm");
          });
        } else {
          match.savePersonForMyPerson(form.value).then((res) => {
            ElMessage.success("保存成功");
            show.value = false;
            emit("submitForm");
          });
        }
      }
    }
  });
}

function cancel() {
  show.value = false;
}
</script>

<style lang="scss">
.threeFour {
  width: 100%;

  .el-upload--picture-card {
    width: 120px;
    height: 160px;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 120px;
    height: 160px;
  }
}

.tip {
  font-size: 13px;
  color: #999;
  margin: 10px 0;

  i {
    color: red;
    margin: 0 4px 0 0;
  }
}

.shenfen {
  .el-upload--picture-card {
    width: 320px;
    height: 200px;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 320px;
    height: 200px;
  }
}
.touxiang {
  .el-upload--picture-card {
    width: 150px;
    height: 210px;
    border:1px solid rgba(46, 190, 164, 0.527);
  }
  .fileItem {
    width: 150px;
    height: 210px;
  }
  .el-upload-list--picture-card .el-upload-list__item {
    width: 150px;
    height: 210px;
  }
}

.el-form--inline .el-form-item {
  width: 100%;
}
</style>
